<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON格式化工具</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">
</head>
<body>
    <header>
        <h1>JSON格式化工具</h1>
        <a href="https://github.com/Rodert/jsonformat" target="_blank" class="github-link">
            <svg height="24" width="24" viewBox="0 0 16 16" version="1.1">
                <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
            </svg>
            GitHub
        </a>
    </header>
    
    <main class="container">
        <div class="input-section">
            <h2>输入JSON</h2>
            <div class="button-group">
                <button id="format-btn">格式化</button>
                <button id="clear-btn">清空</button>
                <button id="sample-btn">示例</button>
            </div>
            <textarea id="json-input" placeholder="请在此处粘贴您的JSON数据..."></textarea>
        </div>
        
        <div class="output-section">
            <h2>格式化结果</h2>
            <div class="button-group">
                <button id="copy-btn">复制</button>
            </div>
            <pre><code id="json-output" class="json"></code></pre>
        </div>
    </main>
    
    <footer>
        <p>© 2023 JSON格式化工具 | <a href="https://github.com/Rodert/jsonformat" target="_blank">GitHub</a></p>
        <p class="author-info">作者：王仕宇 - 软件开发工程师 | 社媒账号：<a href="https://github.com/Rodert" target="_blank">JavaPub</a></p>
    </footer>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script src="js/script.js"></script>
</body>
</html>